<template>
    <div>
        <splitpanes
            class="default-theme"
            horizontal
            :push-other-panes="false"
            style="height: 80vh"
        >
            <pane style="background-color: violet">
                <span>1</span>
            </pane>
            <pane style="background-color: orange">
                <splitpanes :push-other-panes="false">
                    <pane style="background-color: yellow">
                        <span>2</span>
                    </pane>
                    <pane style="background-color: red">
                        <span>3</span>
                    </pane>
                    <pane style="background-color: blue">
                        <span>4</span>
                    </pane>
                </splitpanes>
            </pane>
            <pane style="background-color: green">
                <span>5</span>
            </pane>
        </splitpanes>
    </div>
</template>

<script>
export default {
    name: "Index"
}
</script>

<style scoped>
    span {
        font-size: 50px;
    }
    .splitpanes__pane {
        text-align: center;
        align-items: center;
    }
</style>
